<template>
  <div style="text-align:left">
    <el-button type="danger" size="medium" icon="el-icon-delete" @click="dialogVisible = true">批量删除</el-button>
    <el-dialog
      title="批量删除门店产品"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div>
        <el-select v-model="salesRegionId" placeholder="经营区域" clearable @change="getStores">
          <el-option
            v-for="item in salesRegions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="regionId" placeholder="投资区域" clearable @change="getStores">
          <el-option
            v-for="item in regions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="status" clearable placeholder="门店状态" @change="getStores">
          <el-option
            v-for="item in statuses"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div style="padding:10px">
          <el-divider>删除门店</el-divider>
          <el-transfer v-model="storeIds" :data="stores" filterable />
        </div>
        <div style="padding:10px">
          <el-divider>删除产品类型</el-divider>
          <el-transfer v-model="categoryIds" :data="categories" filterable />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      stores: [],
      storeIds: [],
      categories: [],
      categoryIds: [],
      regionId: '',
      salesRegionId: '',
      salesRegions: [],
      regions: [],
      status: '',
      statuses: [
        {
          value: 0,
          label: '营业中'
        },
        {
          value: 2,
          label: '开业筹备中'
        }
      ]
      // isOnSalse: false
    }
  },
  created() {
    this.axios.get(`/manage/regions`, { params: {
      '@filter': 'entity.getLevelType() == 1'
    }}).then((res) => {
      console.log(res.data)
      this.salesRegions = res.data
    })
    this.axios.get(`/manage/regions`, { params: {
      '@filter': 'entity.getLevelType() == 0'
    }}).then((res) => {
      console.log(res.data)
      this.regions = res.data
    })
    this.getStores()
    this.axios.get(`/manage/categories`, { params: {
      '@filter': `entity.getParent().getType().getSlug() == 'product'`,
      '@display': `{
        'key': 'entity.getId()',
        'label': 'entity.getName()'
      }`
    }}).then((res) => {
      this.categories = res.data
    })
  },
  methods: {
    getStores() {
      let filter = `entity.getStatus() != 1`
      if (this.salesRegionId > 0) {
        filter += ` && entity.getRegion2().getId() == ${this.salesRegionId}`
      }
      if (this.regionId > 0) {
        filter += ` && entity.getRegion().getId() == ${this.regionId}`
      }
      if (this.status !== '') {
        filter += ` && entity.getStatus() == ${this.status}`
      }
      this.storeIds = []
      this.axios.get(`/manage/stores`, { params: {
        '@filter': filter,
        '@display': `{
        'key': 'entity.getId()',
        'label': 'entity.getName()'
      }`
      }}).then((res) => {
        console.log('res', res)
        this.stores = res.data
      })
    },
    submit() {
      console.log(this.storeIds.toString(), this.categoryIds.toString())
      if (this.storeIds.length > 0 && this.categoryIds.length > 0) {
        // 批量循环删除
        let filter = `entity.getStore().getId() in [${this.storeIds.toString()}]`
        if (this.category !== '') {
          filter += ` && entity.getProduct().getCategory().getId() in [${this.categoryIds.toString()}]`
        }
        this.axios.get(`/manage/store-products`, { params: {
          '@filter': filter,
          limit: 10000
        }}).then((res) => {
          let count = res.data.length
          console.log('需要删除的数量：', count)
          if (count === 0) {
            this.$message.error('没有需要删除的内容！')
          } else {
            const loading = this.$loading({
              lock: true,
              text: `一共${count}个，正在删除中...`,
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            for (const i of res.data) {
              this.axios.delete(`/manage/store-products/${i.id}`).then((res) => {
                count--
                loading.text = `正在删除，剩余${count}个`
                if (count === 0) {
                  this.$message.success('删除成功！')
                  this.dialogVisible = false
                  loading.close()
                }
              })
            }
          }
        })
      } else {
        this.$message.error('请选择门店！')
      }
    }
  }
}
</script>

<style>
  .el-transfer-panel{
    width: 380px;
  }
</style>
